<template>
  <div class="home_page">
    <!-- 头部搜索 -->
    <header
      class="header u-f u-f-ac"
      :class="[headerBgWhite ? 'bg_white' : '']"
    >
      <div class="icon_box u-f u-f-ac u-f-jc">
        <i class="iconfont icon-caidan"></i>
      </div>
      <div class="search_box u-f1">
        <i class="iconfont icon-sousuo"></i>
        <input class="search_ipt" type="text" placeholder="请输入歌曲" />
      </div>
      <div class="icon_box u-f u-f-ac u-f-jc">
        <i class="iconfont icon-maikefeng"></i>
      </div>
    </header>
    <!-- 主体 -->
    <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
      <div class="main" @scroll="mainScroll($event)">
        <!-- 轮播 -->
        <div class="swiper_box" :class="[headerBgWhite ? 'bg_white' : '']">
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            lazy-render
            :show-indicators="false"
          >
            <van-swipe-item v-for="item in banners" :key="item.pic">
              <img class="swiper_img" :src="item.pic" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- grid -->
        <ul class="header_grid touch_x_box van-hairline--bottom">
          <li class="grid_li" v-for="item in headerGrid" :key="item.name">
            <p class="icon_box u-f u-f-ac u-f-jc">
              <i class="iconfont" :class="item.icon"></i>
            </p>
            <p class="txt">{{ item.name }}</p>
          </li>
        </ul>
        <!-- 推荐歌单 -->
        <div class="recommend_playlist">
          <div class="head_title u-f u-f-ac u-f-jsb">
            <h2 class="txt u-f u-f-ac">推荐歌单</h2>
            <span class="tag van-hairline--surround"
              >更多<i class="iconfont icon-arrow-right-copy-copy"></i
            ></span>
          </div>
          <div class="touch_x_box playlist_box">
            <image-text-list
              v-for="item in recommendResourceList"
              :key="item.id"
              :recommend="item"
            ></image-text-list>
          </div>
        </div>
        <!-- 推荐歌曲 -->
        <div class="recommend_songlist">
          <div class="head_title u-f u-f-ac u-f-jsb">
            <h2 class="txt u-f u-f-ac">
              <i class="iconfont icon-xindongfang-shuaxintubiao"></i
              >听过爱过的华语经典
            </h2>
            <span class="tag van-hairline--surround" @click="handleClickHuaList"
              ><i class="iconfont icon-bofang"></i>播放</span
            >
          </div>
          <div class="touch_x_box playlist_box">
            <div
              class="playlist"
              v-for="(item, index) in personalizedNewsongList"
              :key="index"
            >
              <song-list
                showPlay
                border
                :showMenu="false"
                v-for="song in item"
                :key="song.id"
                :song="song"
                @change="handleHuaSong"
              ></song-list>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <!--  -->
    <van-tabbar route :border="false">
      <van-tabbar-item replace to="/" icon=" iconfont icon-musiccloud">
        发现
      </van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon=" iconfont icon-yinyue">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue'
import ImageTextList from '@/components/common/image-text-list.vue'
import SongList from '@/components/common/song-list.vue'
import { banner, personalizedNewsong } from '@/api/home'
import { recommendResource } from '@/api/recommend'
import { useStore } from 'vuex'

// 处理内容滚动时，头部颜色变化
const handleMainScroll = (headerBgWhite: Ref<boolean>) => {
  const mainScroll = (event: any) => {
    if (event.target.scrollTop >= 5) {
      headerBgWhite.value = true
    } else {
      headerBgWhite.value = false
    }
  }

  return {
    mainScroll,
  }
}

// 获取banner
const handleBanner = () => {
  const banners: Ref<any[]> = ref([])

  const getBanner = async () => {
    const { data } = await banner(2)
    banners.value = data.banners
  }

  onMounted(() => {
    getBanner()
  })

  return {
    getBanner,
    banners,
  }
}

// 顶部的 grid
const handleHeaderGrid = () => {
  const headerGrid: Array<any> = [
    {
      icon: 'icon-riliqiandaodakamianxing',
      name: '每日推荐',
      to: '',
    },
    {
      icon: 'icon-FM',
      name: '私人FM',
      to: '',
    },
    {
      icon: 'icon-gedan',
      name: '歌单',
      to: '',
    },
    {
      icon: 'icon-paihangbangxuanzhong',
      name: '排行榜',
      to: '',
    },
    {
      icon: 'icon-musiccloud',
      name: '数字专辑',
      to: '',
    },
    {
      icon: 'icon-maikefeng',
      name: '歌房',
      to: '',
    },
  ]

  return {
    headerGrid,
  }
}

// 获取每日推荐歌单
const handleRecommendResource = () => {
  const recommendResourceList: Ref<any[]> = ref([])

  const getRecommendResource = async () => {
    const { data } = await recommendResource()
    recommendResourceList.value = data.recommend
  }

  onMounted(() => {
    getRecommendResource()
  })

  return {
    getRecommendResource,
    recommendResourceList,
  }
}

// 获取推荐新音乐
const handlePersonalizedNewsong = () => {
  const personalizedNewsongList: Ref<any[]> = ref([])
  const store = useStore()

  const getPersonalizedNewsong = async () => {
    const { data } = await personalizedNewsong()
    const n = 3
    const list: any = []
    const len = data.result.length
    const boxLen = len % n === 0 ? len / n : Math.ceil(len / n)
    for (let i = 0; i < boxLen; i++) {
      let temp = data.result.slice(i * n, i * n + n)
      list.push(temp)
    }
    personalizedNewsongList.value = list
  }

  const handleClickHuaList = () => {
    const list = personalizedNewsongList.value.flat(1)

    store.commit('setPlaylist', list)
    store.commit('setCurrentPlaying', list[0])
    store.commit('setPlayIndex', 0)
    store.commit('setIsFirstRun', false)
  }

  const handleHuaSong = (song: any) => {
    const list = personalizedNewsongList.value.flat(1)

    store.commit('setPlaylist', list)
    store.commit('setCurrentPlaying', song)
    store.commit('setIsFirstRun', false)

    const index = list.findIndex((item) => {
      return item.id === song.id
    })

    store.commit('setPlayIndex', index)
  }

  onMounted(() => {
    getPersonalizedNewsong()
  })

  return {
    getPersonalizedNewsong,
    handleClickHuaList,
    handleHuaSong,
    personalizedNewsongList,
  }
}

export default defineComponent({
  name: 'Home',
  components: {
    ImageTextList,
    SongList,
  },
  setup() {
    const refreshLoading: Ref<boolean> = ref(false)
    const headerBgWhite: Ref<boolean> = ref(false)

    const { banners, getBanner } = handleBanner()
    const { recommendResourceList, getRecommendResource } =
      handleRecommendResource()
    const {
      personalizedNewsongList,
      getPersonalizedNewsong,
      handleClickHuaList,
      handleHuaSong,
    } = handlePersonalizedNewsong()

    const onRefresh = () => {
      getBanner()
      getRecommendResource()
      getPersonalizedNewsong()

      refreshLoading.value = false
    }

    return {
      refreshLoading,
      headerBgWhite,
      banners,
      recommendResourceList,
      personalizedNewsongList,
      ...handleHeaderGrid(),
      onRefresh,
      ...handleMainScroll(headerBgWhite),
      handleClickHuaList,
      handleHuaSong,
    }
  },
})
</script>

<style lang="less" scoped>
.home_page {
  height: 100vh;
  background-color: var(--sky-page-background-color);
  .header {
    height: 50px;
    background-color: var(--sky-gray1-background-color);
    &.bg_white {
      background-color: var(--sky-white-background-color);
      .search_ipt {
        background-color: var(--sky-gray1-background-color);
      }
    }
    .icon_box {
      width: 45px;
      height: 100%;
      .iconfont {
        font-size: 22px;
        &.icon-maikefeng {
          font-size: 23px;
        }
      }
    }
    .search_box {
      position: relative;
      padding: 5px 0;
      .icon-sousuo {
        position: absolute;
        left: 15px;
        top: 18px;
        font-size: 16px;
        color: var(--sky-text-gray6-color);
      }
      .search_ipt {
        width: 100%;
        height: 40px;
        padding: 5px 15px 5px 35px;
        font-size: 14px;
        border: none;
        outline: none;
        border-radius: 40px;
        box-sizing: border-box;
      }
    }
  }

  .main {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .swiper_box {
      height: 135px;
      padding-bottom: 16px;
      padding-top: 10px;
      background: var(--sky-gray1ToWhite-background-color);
      &.bg_white {
        background: var(--sky-white-background-color);
      }
      .van-swipe {
        height: 100%;
        .van-swipe-item {
          padding: 0 16px;
          border-radius: 10px;
          box-sizing: border-box;
        }
      }
      .swiper_img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .header_grid {
      height: 65px;
      padding-bottom: 16px;
      background-color: var(--sky-white-background-color);
      .grid_li {
        width: 73px;
        padding: 0 14px;
        box-sizing: border-box;
        .icon_box {
          width: 45px;
          height: 45px;
          border-radius: 45px;
          background-color: var(--sky-pink-background-color);
          .iconfont {
            font-size: 24px;
            color: var(--sky-text-red-color);
          }
        }
        .txt {
          width: 45px;
          height: 20px;
          line-height: 25px;
          font-size: 12px;
          color: var(--sky-text-black-color);
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .recommend_playlist {
      padding: 16px 0;
      margin-bottom: 16px;
      background-color: var(--sky-white-background-color);
      .head_title {
        padding: 0 16px 10px;
        .txt {
          font-size: 20px;
          color: var(--sky-text-black-color);
          .iconfont {
            font-size: 24px;
            margin-right: 3px;
          }
        }
        .tag {
          display: inline-block;
          padding: 6px 10px;
          font-size: 14px;
          color: var(--sky-text-black-color);
          border-radius: 30px;
        }
      }
      .playlist_box {
        height: 150px;
        padding: 0 16px;
      }
    }

    .recommend_songlist {
      padding: 16px 0;
      margin-bottom: 76px;
      background-color: var(--sky-white-background-color);
      .head_title {
        padding: 0 16px 10px;
        .txt {
          font-size: 20px;
          color: var(--sky-text-black-color);
          .iconfont {
            font-size: 24px;
            margin-right: 3px;
          }
        }
        .tag {
          display: inline-block;
          padding: 6px 10px;
          font-size: 14px;
          color: var(--sky-text-black-color);
          border-radius: 30px;
        }
      }
      .playlist_box {
        padding: 0 16px;
        .playlist {
          width: 305px;
          margin-right: 10px;
        }
      }
    }
  }
}
.van-pull-refresh {
  height: calc(100vh - 103px);
}
.van-hairline--bottom::after {
  top: -34%;
}
.van-hairline--surround::after {
  border-radius: 30px;
}
</style>